<template>
     <div class="head">
         <div class="headerBox">
      <div class="header border-b">
        <div class="headerText textover ft18">消息中心</div>
        <div class="left-back" @click="clickHandler()">
        </div>
        </div>
        <div class="right-more"></div>
      </div>
      <ul class="bdf">
      <li class="pt">
        <a class="flex">
          <div class="bgimg">
            <img src="http://img1.epetbar.com/2020-06/05/15/2a1514215553a5dda2d7cdda3cba9db9.png@!water" width="50px" height="50px">
          </div>
          <div class="it">
            <div  class="clearfix">
              <h1  class="title">服务通知</h1>
              <span class="Ltitle">10:30:15</span>
            </div><br>
            <p  class="content">0元兑礼权益提醒</p>
          </div>
        </a>
      </li>
      <li class="pt">
        <a class="flex">
          <div class="bgimg">
            <img src="http://img1.epetbar.com/2020-06/05/15/e2f570f9f738bb921f7373d5e0dcdaad.png@!water" width="50px" height="50px">
          </div>
          <div class="it">
            <div  class="clearfix">
              <h1  class="title">精选活动</h1>
              <span class="Ltitle">2020-12-25</span>
            </div><br>
            <p  class="content">会员福利大放送！E宠会员买奶茶可享...</p>
            
          </div>
        </a>
      </li>
      <li class="pt">
        <a class="flex">
          <div class="bgimg">
            <img src="http://img1.epetbar.com/2020-06/05/15/457dfae67fcec921806e51fcd331c645.png@!water" width="50px" height="50px">
          </div>
          <div class="it">
            <div  class="clearfix">
              <h1  class="title">交易动态</h1>
              <span class="Ltitle"></span>
            </div>
            <p  class="content"></p>
          </div>
        </a>
      </li>
      <li class="pt">
        <a class="flex">
          <div class="bgimg">
            <img src="http://img1.epetbar.com/2020-06/05/16/817d6e6c53132fbe0e3f1be3aadf80b8.png@!water" width="50px" height="50px">
          </div>
          <div class="it">
            <div  class="clearfix">
              <h1  class="title">优惠促销</h1>
              <span class="Ltitle">10:33:15</span>
            </div><br>
            <p  class="content">[折扣中]￥309.00购...</p>
          </div>
        </a>
      </li>
      <li class="pt">
        <a class="flex">
          <div class="bgimg">
            <img src="http://img1.epetbar.com/2020-06/05/16/567cc729bd8139bce45ace2973fff1cb.png@!water" width="50px" height="50px">
          </div>
          <div class="it">
            <div  class="clearfix">
              <h1  class="title">账户通知</h1>
              <span class="Ltitle">2021-01-09</span>
            </div><br>
            <p  class="content">代金券即将失效提醒</p>
          </div>
        </a>
      </li>
    </ul>
    </div>
    
</template>
<script>
export default {
    methods:{
         clickHandler(){
            this.$router.back(-1);
        },

    },
     data() {
    return {
      mesList: [],
    };
  },
  async mounted() {
    
    let result = await this.$http.get({
      url: "/user/notification/Index.html",
      params: {
        version: '517',
        system: 'wap',
        isWeb: 1,
        distinct_id:
          '96513866273889',
        debug_param:''
      }
    })
    this.mesList = result.list;
    // console.log(result.list);
    
    
    
  },
}
</script>
<style lang="stylus" scoped>
.head
  background-color #f5f5f5
  height 100%
  overflow auto
.header {
  width: 100%;
  height: 0.5rem;
  background: #fff;
  line-height: 0.5rem;
  color: #333;
  position: relative;
  border-bottom: 0.01rem solid #f3f3f3;
}

.headerText {
  text-align: center;
  margin: 0 0.65rem;
}

.textover {
  overflow: hidden;
  white-space: nowrap;
  word-wrap: normal;
  text-overflow: ellipsis;
}

.ft18 {
  font-size: 0.18rem;
}

.left-back {
  width: 0.35rem;
  height: 0.35rem;
  background: url('../assets/img/topIco.bc556dcf.png') 0 0 no-repeat;
  background-size: 0.35rem auto;
  position: absolute;
  left: 0.05rem;
  top: 0.07rem;
  background-position: 0 0;
}

.right-more {
  width: 0.35rem;
  height: 0.35rem;
  background: url('../assets/img/topIco.bc556dcf.png') 0 0 no-repeat;
  background-size: 0.35rem auto;
  position: absolute;
  right: 0.05rem;
  top: 0.07rem;
  background-position: 0 -0.7rem;
}
.bdf
  background: #fff;
  padding-left: 0.15rem;
  margin-top: 0.1rem;
.pt
  padding-bottom: 0.1rem;
  padding-right: 0.15rem;
  padding-top: 0.1rem;
ul li
  border-bottom 0.01rem solid #e7e7e7
.flex
  display flex
.bgimg
  margin-right: 0.15rem;
 

.it
  flex 1
  -webkit-box-flex: 1;

.title
  color: #333;
  font-size: 0.15rem;
  float: left;
.Ltitle
  color: #999;
  font-size: 0.12rem;
  float: right;
.content
  color: #999;
  font-size: 0.13rem;
  margin-top: 0.05rem;
  
p
  word-wrap:break-word;
  word-break:break-all;
</style>